/*
* @Date: 2020/6/12
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import Descriptions from '../../descriptions';
import { Form, Input, Checkbox, Select } from 'antd';

export default class extends React.Component {
  onPropsChange = (key, value) => {
    const { onChange, uid, component } = this.props;
    onChange && onChange({
      uid,
      key,
      value,
      component,
    });
  }

  onPropsCheck = (key, e) => {
    const { onChange, uid, component } = this.props;
    onChange && onChange({
      uid,
      key,
      value: e.target.checked,
      component,
    });
  }

  onColorChange = (key, e) => {
    const { onChange, uid, component } = this.props;
    onChange && onChange({
      uid,
      key,
      value: e.target.value,
      component,
    });
  }

  render() {
    const { propsValue, uid, component } = this.props;
    if (!Descriptions[component]) {
      return null;
    }
    const { props = [],  }  = Descriptions[component];
    return (
      <React.Fragment>
        <Form>
          {
            props.map((vo) => {
              return (
                <Form.Item
                  label={vo.label}
                >
                  {
                    vo.type === 'select' && (
                      <Select
                        value={propsValue[vo.key]}
                        onChange={(value) => this.onPropsChange(vo.key, value)}
                      >
                        {
                          vo.options.map((item) => (
                            <Select.Option
                              value={item === 'false' ? false : item === 'true' ? true : item}>
                              {item}
                            </Select.Option>
                          ))
                        }
                      </Select>
                    )
                  }
                  {
                    vo.type === 'checked' && (
                      <Checkbox
                        checked={propsValue[vo.key]}
                        onChange={(e) => this.onPropsCheck(vo.key, e)}
                      />
                    )
                  }
                  {
                    vo.type === 'color' && (
                      <input
                        type="color"
                        value={propsValue[vo.key]}
                        onChange={(e) => this.onColorChange(vo.key, e)}
                      />
                    )
                  }
                  {
                    vo.type === 'function' && (
                      <Select
                      >
                        <Select.Option>1</Select.Option>
                      </Select>
                    )
                  }
                  {
                    vo.type === 'string' && (
                      <Input value={propsValue[vo.key]} onChange={(e) => this.onPropsChange(vo.key, e.target.value)}/>
                    )
                  }
                </Form.Item>
              );
            })
          }
        </Form>

      </React.Fragment>
    );
  }
}
